<div style="display: inline-block;width: 1700px;margin-left: calc(50% - 850px);position: relative;overflow-y: auto">

  <div class="header">
    <span class="headerItem" (click)="anchor('#baseInfoCard')">基础信息（{{anchorNum('baseInfo')}}
      /{{formData.hotSearchState === 0 ? 6 : 5}}）</span>
    <span class="headerItem" (click)="anchor('#categoryCard')">类目属性（{{anchorNum('category')}}/4）</span>
    <span class="headerItem" (click)="anchor('#hireInfoCard')">租赁信息（{{anchorNum('hireInfo')}}/1）</span>
    <span class="headerItem" (click)="anchor('#saleCard')">销售规格（{{anchorNum('sale')}}/{{specificationTable.length}}
      ）</span>
    <span class="headerItem" (click)="anchor('#commodityCard')">商品信息（{{anchorNum('commodity')}}/2）</span>
  </div>

  <div class="content">

    <!--    基础信息-->
    <div class="contentCard" id="baseInfoCard">
      <h1>基础信息</h1>
      <nz-row class="row">
        <span class="label required">商品标题</span>
        <input [disabled]="readonly" type="text" placeholder="请输入商品标题" maxlength="30" nz-input
               [(ngModel)]="formData.title">
      </nz-row>
      <nz-row class="row">
        <span class="label">营销语句</span>
        <input [disabled]="readonly" type="text" placeholder="请输入营销语句" maxlength="20" nz-input
               [(ngModel)]="formData.shortName">
      </nz-row>
      <nz-row class="row">
        <span class="label required">商品类型</span>
        <nz-radio-group [disabled]="readonly" [(ngModel)]="formData.goodsType">
          <label nz-radio [nzValue]="1">全新</label>
          <label nz-radio [nzValue]="2">二手</label>
          <label nz-radio [nzValue]="3">权益机</label>
          <label nz-radio [nzValue]="4">资源机</label>
        </nz-radio-group>
      </nz-row>
      <nz-row class="row">
        <span class="label required">标签名</span>
        <input [disabled]="readonly" type="text" placeholder="请输入标签名" maxlength="50" nz-input
               [(ngModel)]="formData.goodsLabel">
      </nz-row>

      <nz-row class="row">
        <span class="label required">所属分类</span>
        <nz-select [disabled]="readonly" nzPlaceHolder="一级分类" [nzBackdrop]="true" style="width: 120px;margin-right: 4px" nzShowSearch
                   [(ngModel)]="formData.typeList[0]" nzAllowClear
                   (ngModelChange)="firstCategoryChange($event)">
          <nz-option [nzValue]="c['id']" [nzLabel]="c['name']" [nzDisabled]="!(c['list']&&c['list']['length'])" *ngFor="let c of firstCategory"></nz-option>
        </nz-select>
        <nz-select [disabled]="readonly" nzPlaceHolder="二级分类" [nzBackdrop]="true" style="width: 120px;margin-right: 4px" nzShowSearch
                   [(ngModel)]="formData.typeList[1]" nzAllowClear
                   (ngModelChange)="secondCategoryChange($event)">
          <nz-option [nzValue]="c['id']" [nzLabel]="c['name']" [nzDisabled]="!(c['list']&&c['list']['length'])" *ngFor="let c of secondCategory"></nz-option>
        </nz-select>
        <nz-select [disabled]="readonly" nzPlaceHolder="三级分类" [nzBackdrop]="true" style="width: 120px;margin-right: 4px" nzShowSearch
                   [(ngModel)]="formData.typeList[2]" nzAllowClear>
          <nz-option [nzValue]="c['id']" [nzLabel]="c['name']" *ngFor="let c of thirdCategory"></nz-option>
        </nz-select>
      </nz-row>
      <nz-row class="row">
        <span class="label required">是否热租</span>
        <nz-radio-group [disabled]="readonly" [(ngModel)]="formData.hotSearchState">
          <label nz-radio [nzValue]="0">是</label>
          <label nz-radio [nzValue]="1">否</label>
        </nz-radio-group>
      </nz-row>
      <nz-row class="row" *ngIf="formData.hotSearchState===0">
        <span class="label required">热租顺序</span>
        <nz-input-number [disabled]="readonly" nzPlaceHolder="请输入" [nzMin]="0" [nzMax]="9999999" [nzPrecision]="0"
                         [(ngModel)]="formData.hotSearch"></nz-input-number>
      </nz-row>
      <nz-row class="row">
        <span class="label">搜索关键词</span>
        <input [disabled]="readonly" type="text" placeholder="请输入关键词" maxlength="50" nz-input
               [(ngModel)]="formData.searchWord">
      </nz-row>
    </div>

    <!--    类目属性-->
    <div class="contentCard" id="categoryCard">
      <h1>类目属性</h1>
      <nz-row class="row">
        <span class="label required">品牌</span>
        <input [disabled]="readonly" type="text" placeholder="请输入标准品牌名称" maxlength="20" nz-input
               [(ngModel)]="formData.brand">
      </nz-row>
      <nz-row class="row">
        <span class="label required">型号</span>
        <input [disabled]="readonly" type="text" placeholder="请输入标准型号名称" maxlength="30" nz-input
               [(ngModel)]="formData.modelType">
      </nz-row>
      <nz-row class="row">
        <span class="label selfTop required">颜色</span>
        <span style="display: inline-block;max-width: 1210px">
          <div>
            <div *ngFor="let color of formData.color;let index=index"
                 style="display: inline-flex;flex-direction: column;margin-bottom: 4px">
                <div>
<!--                  <input type="text" placeholder="请输入颜色" style="width: 100px" maxlength="8" nz-input-->
                  <!--                         [(ngModel)]="color['name']"/>-->
                    <nz-select [disabled]="readonly" nzPlaceHolder="请选择" [nzBackdrop]="true" style="width: 100px"
                               [ngModel]="color['id']" nzAllowClear
                               (ngModelChange)="colorChange(color,$event)">
                      <nz-option [nzValue]="c['id']" [nzLabel]="c['name']" [nzDisabled]="hasColor(c['id'])"
                                 *ngFor="let c of hireColorList"></nz-option>
                    </nz-select>
                  <i *ngIf="formData.color.length>1&&!readonly" (click)="deleteColor(index)" nz-icon
                     nzType="delete" nzTheme="outline"></i>
                </div>
                <app-image-upload style="width: 100px;"
                                  [deleteBtnVisible]="!readonly"
                                  [maxImgLength]="1"
                                  [imageUrl]="color['image']"
                                  (deleteImg)="color['image']=''"
                                  (urlChange)="color['image']=$event"></app-image-upload>
            </div>
          </div>
          <div *ngIf="!readonly"><button nz-button nzType="primary" (click)="addColor()" nzGhost>添加颜色</button></div>
        </span>
      </nz-row>
      <nz-row class="row">
        <span class="label required">机身存储</span>
        <label [disabled]="readonly" nz-checkbox [ngModel]="hasRom(rom['id'])"
               (ngModelChange)="romClick(rom['id'],rom['name'])"
               *ngFor="let rom of hireRomList">{{rom['name']}}</label>
      </nz-row>
      <nz-row class="row">
        <span class="label required">网络制式</span>
        <nz-select [disabled]="readonly" nzPlaceHolder="请选择" [nzBackdrop]="true" style="width: 110px"
                   [(ngModel)]="formData.network">
          <nz-option [nzValue]="0" nzLabel="全网通"></nz-option>
          <nz-option [nzValue]="1" nzLabel="移动"></nz-option>
          <nz-option [nzValue]="2" nzLabel="电信"></nz-option>
          <nz-option [nzValue]="3" nzLabel="联通"></nz-option>
          <nz-option [nzValue]="4" nzLabel="双网通"></nz-option>
          <nz-option [nzValue]="5" nzLabel="不支持"></nz-option>
          <nz-option [nzValue]="6" nzLabel="WiFi版"></nz-option>
        </nz-select>
      </nz-row>
      <nz-row class="row">
        <span class="label required">网络类型</span>
        <nz-select [disabled]="readonly" nzPlaceHolder="请选择" [nzBackdrop]="true" style="width: 110px"
                   [(ngModel)]="formData.networkType">
          <nz-option [nzValue]="0" nzLabel="5G"></nz-option>
          <nz-option [nzValue]="1" nzLabel="4G"></nz-option>
          <nz-option [nzValue]="2" nzLabel="WIFI"></nz-option>
          <nz-option [nzValue]="3" nzLabel="3G"></nz-option>
          <nz-option [nzValue]="4" nzLabel="2G"></nz-option>
          <nz-option [nzValue]="5" nzLabel="WIFI+蜂窝网"></nz-option>
          <nz-option [nzValue]="6" nzLabel="GPS"></nz-option>
          <nz-option [nzValue]="7" nzLabel="GPS+蜂窝网"></nz-option>
        </nz-select>
      </nz-row>
      <nz-row class="row">
        <span class="label required">版本</span>
        <nz-select [disabled]="readonly" nzPlaceHolder="请选择" [nzBackdrop]="true" style="width: 110px"
                   [(ngModel)]="formData.version">
          <nz-option [nzValue]="0" nzLabel="国行"></nz-option>
          <nz-option [nzValue]="1" nzLabel="港台版"></nz-option>
          <nz-option [nzValue]="2" nzLabel="美版"></nz-option>
          <nz-option [nzValue]="3" nzLabel="欧版"></nz-option>
          <nz-option [nzValue]="4" nzLabel="其他外版"></nz-option>
        </nz-select>
      </nz-row>
    </div>

    <!--    租赁信息-->
    <div class="contentCard" id="hireInfoCard">
      <h1>租赁信息</h1>
      <nz-row class="row">
        <span class="label required selfTop">租赁方案</span>
        <span style="margin-top: 4px">
          <!--         租完须归还 -->
          <div>
            <div>
            <label [disabled]="readonly" nz-checkbox [(ngModel)]="formData.hireDate.returnDevice.checked"
                   (ngModelChange)="hirePlanChange()">租完须归还</label>
              <span class="hireRemark">（租期到期后需要用户归还商品，不支持设置买断价）</span>
            </div>
            <div>
              <nz-row class="row">
                <span class="label" style="width: initial">最低租期</span>
                    <nz-select [disabled]="readonly&&!formData.hireDate.returnDevice.checked" nzPlaceHolder="请选择"
                               [nzBackdrop]="true"
                               [ngModel]="formData.hireDate.returnDevice.minDate" nzAllowClear
                               (ngModelChange)="dateRangeChange('returnDevice','minDate',$event)">
                      <nz-option [nzValue]="date['id']" [nzLabel]="date['name']"
                                 [nzDisabled]="formData.hireDate.returnDevice.maxDate!==null&&date['id']>formData.hireDate.returnDevice.maxDate"
                                 *ngFor="let date of hireDateList"></nz-option>
                    </nz-select>
                <span style="margin: 0 8px">~</span>
                <span class="label" style="width: initial">最高租期</span>
                    <nz-select [disabled]="readonly&&!formData.hireDate.returnDevice.checked" nzPlaceHolder="请选择"
                               [nzBackdrop]="true"
                               [ngModel]="formData.hireDate.returnDevice.maxDate" nzAllowClear
                               (ngModelChange)="dateRangeChange('returnDevice','maxDate',$event)">
                      <nz-option [nzValue]="date['id']" [nzLabel]="date['name']"
                                 [nzDisabled]="date['id']<formData.hireDate.returnDevice.minDate"
                                 *ngFor="let date of hireDateList"></nz-option>
                    </nz-select>
              </nz-row>
            </div>
          </div>
          <!--         租完须归还 -->
          <div>
            <div>
            <label [disabled]="readonly" nz-checkbox [(ngModel)]="formData.hireDate.returnOrPurchaseDevice.checked"
                   (ngModelChange)="hirePlanChange()">租完可归还/买断</label>
              <span class="hireRemark">（租期到期后用户可选择归还或者买断商品，必须设置买断价）</span>
            </div>
            <div>
              <nz-row class="row">
                <span class="label" style="width: initial">最低租期</span>
                    <nz-select [disabled]="readonly&&formData.hireDate.returnOrPurchaseDevice.checked"
                               nzPlaceHolder="请选择" [nzBackdrop]="true"
                               [ngModel]="formData.hireDate.returnOrPurchaseDevice.minDate"
                               (ngModelChange)="dateRangeChange('returnOrPurchaseDevice','minDate',$event)"
                               nzAllowClear>
                      <nz-option [nzValue]="date['id']" [nzLabel]="date['name']"
                                 [nzDisabled]="formData.hireDate.returnOrPurchaseDevice.maxDate!==null&&date['id']>formData.hireDate.returnOrPurchaseDevice.maxDate"
                                 *ngFor="let date of hireDateList"></nz-option>
                    </nz-select>
                <span style="margin: 0 8px">~</span>
                <span class="label" style="width: initial">最高租期</span>
                    <nz-select [disabled]="readonly&&formData.hireDate.returnOrPurchaseDevice.checked"
                               nzPlaceHolder="请选择" [nzBackdrop]="true"
                               [ngModel]="formData.hireDate.returnOrPurchaseDevice.maxDate"
                               (ngModelChange)="dateRangeChange('returnOrPurchaseDevice','maxDate',$event)"
                               nzAllowClear>
                      <nz-option [nzValue]="date['id']" [nzLabel]="date['name']"
                                 [nzDisabled]="date['id']<formData.hireDate.returnOrPurchaseDevice.minDate"
                                 *ngFor="let date of hireDateList"></nz-option>
                    </nz-select>
              </nz-row>
            </div>
          </div>
          <!--         租完即送 -->
          <div>
            <div>
            <label [disabled]="readonly" nz-checkbox [(ngModel)]="formData.hireDate.giveDevice.checked"
                   (ngModelChange)="hirePlanChange()">租完即送</label>
              <span class="hireRemark">（租期到期后用户可0元买断商品，无需归还商品，必须设置买断价）</span>
            </div>
            <div>
              <nz-row class="row">
                <span class="label" style="width: initial">最低租期</span>
                    <nz-select [disabled]="readonly&&formData.hireDate.giveDevice.checked" nzPlaceHolder="请选择"
                               [nzBackdrop]="true"
                               [ngModel]="formData.hireDate.giveDevice.minDate" nzAllowClear
                               (ngModelChange)="dateRangeChange('giveDevice','minDate',$event)">
                      <nz-option [nzValue]="date['id']" [nzLabel]="date['name']"
                                 [nzDisabled]="formData.hireDate.giveDevice.maxDate!==null&&date['id']>formData.hireDate.giveDevice.maxDate"
                                 *ngFor="let date of hireDateList"></nz-option>
                    </nz-select>
                <span style="margin: 0 8px">~</span>
                <span class="label" style="width: initial">最高租期</span>
                    <nz-select [disabled]="readonly&&formData.hireDate.giveDevice.checked" nzPlaceHolder="请选择"
                               [nzBackdrop]="true"
                               [ngModel]="formData.hireDate.giveDevice.maxDate" nzAllowClear
                               (ngModelChange)="dateRangeChange('giveDevice','maxDate',$event)">
                      <nz-option [nzValue]="date['id']" [nzLabel]="date['name']"
                                 [nzDisabled]="date['id']<formData.hireDate.giveDevice.minDate"
                                 *ngFor="let date of hireDateList"></nz-option>
                    </nz-select>
              </nz-row>
            </div>
          </div>

        </span>
      </nz-row>
    </div>

    <!--    销售规格-->
    <div class="contentCard" id="saleCard">
      <h1>销售规格 <a style="color: #1890FF;font-weight: initial;font-size: 14px" (click)="defaultRule()">查看默认规则</a></h1>
      <nz-table #basicTable
                style="width: 1600px;margin-left: 50px"
                [nzPageSize]="9999"
                nzShowPagination="false"
                nzOuterBordered="true"
                nzBordered
                [nzData]="specificationTable">
        <thead>
        <tr>
          <th nzAlign="center">套餐</th>
          <th nzAlign="center">颜色</th>
          <th nzAlign="center">机身存储</th>
          <th nzAlign="center">缺货</th>
          <th nzAlign="center">押金</th>
          <th nzAlign="center">设备成本</th>
          <th nzAlign="center">买断价格</th>
          <th nzAlign="center">库存（件）</th>
          <th nzAlign="center">90天价</th>
          <th nzAlign="center">90天单价</th>
          <th nzAlign="center">180天总价</th>
          <th nzAlign="center">180天单价</th>
          <th nzAlign="center">365天总价</th>
          <th nzAlign="center">365天单价</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of basicTable.data;let index=index">
          <td nzAlign="center" [rowSpan]="data['specRowNum']" *ngIf="data['specRowNum']>0">{{data.planName}}</td>
          <td nzAlign="center" [rowSpan]="data['colorRowNum']" *ngIf="data['colorRowNum']>0">{{data.colorName}}</td>
          <td nzAlign="center">{{data.memoryName}}</td>
          <td nzAlign="center">
            <nz-switch [disabled]="readonly" [(ngModel)]="data.stockoutFlag" nzCheckedChildren="开"
                       nzUnCheckedChildren="关"></nz-switch>
          </td>
          <td nzAlign="center">
            <nz-input-number [disabled]="readonly" nzPlaceHolder="请输入" [nzMin]="1" [nzMax]="9999999" [nzPrecision]="0"
                             [(ngModel)]="data['deposit']"></nz-input-number>
          </td>
          <td nzAlign="center">
            <nz-input-number [disabled]="readonly" nzPlaceHolder="请输入" [nzMin]="1" [nzMax]="9999999" [nzPrecision]="0"
                             [(ngModel)]="data['equipmentCost']"></nz-input-number>
          </td>
          <td nzAlign="center">
            <nz-input-number nzPlaceHolder="请输入" [nzMin]="1" [nzMax]="9999999" [nzPrecision]="0"
                             [nzDisabled]="data.planId===0||readonly"
                             [(ngModel)]="data['buyout']"></nz-input-number>
          </td>
          <td nzAlign="center">
            <nz-input-number [disabled]="readonly" nzPlaceHolder="请输入" [nzMin]="0" [nzMax]="9999999" [nzPrecision]="0"
                             [(ngModel)]="data['inventory']"></nz-input-number>
          </td>
          <td nzAlign="center">
            <nz-input-number nzPlaceHolder="请输入" [nzMin]="1" [nzMax]="9999999" [nzPrecision]="2"
                             (ngModelChange)="priceChange($event,'quarterRent',data,'quarterRentDay',90)"
                             [nzDisabled]="!data['quarterRentAvailable']||readonly"
                             [ngModel]="data['quarterRent']"></nz-input-number>
          </td>
          <td nzAlign="center">{{data['quarterRentDay']}}</td>
          <td nzAlign="center">
            <nz-input-number nzPlaceHolder="请输入" [nzMin]="1.8" [nzMax]="9999999" [nzPrecision]="2"
                             (ngModelChange)="priceChange($event,'halfyearRent',data,'halfyearRentDay',180)"
                             [nzDisabled]="!data['halfyearAvailable']||readonly"
                             [ngModel]="data['halfyearRent']"></nz-input-number>
          </td>
          <td nzAlign="center">{{data['halfyearRentDay']}}</td>
          <td nzAlign="center">
            <nz-input-number nzPlaceHolder="请输入" [nzMin]="3.65" [nzMax]="9999999" [nzPrecision]="2"
                             (ngModelChange)="priceChange($event,'yearRent',data,'yearRentDay',365)"
                             [nzDisabled]="!data['yearRentAvailable']||readonly"
                             [ngModel]="data['yearRent']"></nz-input-number>
          <td nzAlign="center">{{data['yearRentDay']}}</td>
        </tr>
        </tbody>
      </nz-table>
    </div>

    <!--    商品信息-->
    <div class="contentCard" id="commodityCard">
      <h1>商品信息</h1>
      <nz-row class="row" style="margin-bottom: 12px">
        <span class="label required selfTop">商品图片</span>
        <app-image-upload [addFileArea]="true" [deleteBtnVisible]="!readonly" [mainImgBtn]="true"
                          [imageUrls]="formData.images"
                          [isUsedCommodity]="true"
                          (deleteImg)="removeImg($event,'images')"
                          (urlChange)="appendImg($event,'images')"
                          (setMainImg)="setMainImg($event)"
                          [maxWidth]="'1080px'"
                          [dragDisabled]="false"
                          [maxImgLength]="8"></app-image-upload>
      </nz-row>
      <nz-row class="row">
        <span class="label required selfTop">商品信息</span>
        <span style="display: inline-block;max-width: 1080px;overflow-x: auto">
        <app-image-upload [addFileArea]="true" [deleteBtnVisible]="!readonly" [imageUrls]="formData.infoImages"
                          [isUsedCommodity]="true"
                          (deleteImg)="removeImg($event,'infoImages')"
                          (urlChange)="appendImg($event,'infoImages')"
                          [maxWidth]="'2400px'"
                          [dragDisabled]="false"
                          [maxImgLength]="20"></app-image-upload>
        </span>
        <button style="margin-left: 8px" nz-button nzType="primary"
                (click)="showPreviewImgVertical(formData.infoImages)">预览
        </button>
      </nz-row>
      <nz-row class="row">
        <span class="label required selfTop">租赁说明</span>
        <app-image-upload [addFileArea]="true" [deleteBtnVisible]="!readonly" [imageUrls]="formData.leaseExplainImg"
                          [isUsedCommodity]="true"
                          (deleteImg)="removeImg($event,'leaseExplainImg')"
                          (urlChange)="appendImg($event,'leaseExplainImg')"
                          [maxWidth]="'1080px'"
                          [dragDisabled]="false"
                          [maxImgLength]="8"></app-image-upload>
        <button style="margin-left: 8px" nz-button nzType="primary"
                (click)="showPreviewImgVertical(formData.leaseExplainImg)">预览
        </button>
      </nz-row>
    </div>
  </div>

  <div class="footer">
    <button nzDanger nz-button routerLink="/hireDevice/hireDeviceCommodityList" nzType="default">返回</button>
    <button nz-button nzType="primary" (click)="save()" *ngIf="!readonly">保存</button>
  </div>

</div>

<!--图片预览-->
<nz-modal
  [nzVisible]="verticalImgModal.visible"
  nzTitle="图片预览"
  [nzFooter]="null"
  nzWidth="648px"
  (nzOnCancel)="hidePreviewImgVertical()">
  <div *nzModalContent>
    <div style="max-height: 600px;overflow-y: auto;position: relative">
      <div style="width: 100%;height: 100%;position: absolute;"></div>
      <span *ngIf="verticalImgModal.images" style="display: inline-flex;flex-direction: column;">
      <img width="600px" [src]="img" *ngFor="let img of verticalImgModal.images">
    </span>
    </div>

  </div>
</nz-modal>
